<template>
  <div>
    <nav-top class="navTop"
             Licon="back"
             title="序列号再分配"
             @callback="goBack" />

    <div class="serial-change gl-content">
      <div class="card">
        <div class="name-num flex jcb">
          <div class="name">{{ serialDetail.pname }}</div>
          <div class="num">¥{{ serialDetail.present_price.toFixed(2) }}</div>
        </div>
        <div class="can-active">
          剩余未激活：{{ serialDetail.amount - serialDetail.count }}
        </div>
      </div>
      <div class="total">回收数量：共{{ vipNum.total }}个</div>
      <div class="form">
        <div class="item number flexSelect">
          <!-- <div class="start"> -->
          <input class="start"
                 v-model="vipNum.min_serial" />
          <!-- {{ vipNum.min_serial ? vipNum.min_serial : "0" }} -->
          <!-- </div> -->
          <span class="span dib vam tac">至</span>
          <!-- <div class="end"> -->
          <input class="end start"
                 v-model="vipNum.max_serial" />
          <!-- {{ vipNum.max_serial ? vipNum.max_serial : "0" }} -->
          <!-- </div> -->
        </div>
        <input class="item input w100 bsb"
               placeholder="请输入新批次名称"
               v-model="pname" />
        <input class="item input w100 bsb"
               placeholder="请输入新批次价格"
               v-model="price" />
        <gl-picker class="item select bsb w100 "
                   title="队员筛选"
                   :value="activeProxy"
                   @sure="selectProxy"
                   :options="person">
          <div class="flexSelect">
            <span>
              {{ activeProxy[0] ? activeProxy[0].name : "队员选择" }}</span>
            <div class="triangle"></div>
          </div>
        </gl-picker>
        <gl-picker class="item select bsb w100"
                   title="学校筛选"
                   :value="activeSchool"
                   @sure="selectSchool"
                   :options="school"
                   value-key="name">
          <div class="flexSelect">
            {{ activeSchool[0] ? activeSchool[0].name : "学校选择" }}
            <div class="triangle"></div>
          </div>
        </gl-picker>
        <textarea placeholder="备注（非必填）"
                  class="item text bsb w100"
                  v-model="textArea"></textarea>
      </div>
      <div class="btn tac"
           @click="submission">提交</div>
    </div>
  </div>
</template>

<script>
import GlPicker from '../../../components/glpicker'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'SerialChange',
  data() {
    return {
      vipNum: {}, // 回收数量
      person: [], // 队员
      school: [{ name: '请先选择队员' }], // 学校
      activeSchool: [], // 学校选中的值
      activeProxy: [], // 队员选中的值
      textArea: '', // 备注
      pname: '', // 批次名称
      price: '' // 价格
    }
  },
  components: { GlPicker },
  computed: {
    ...mapGetters(['serialDetail', 'proxy_id', 'proxy_type'])
  },
  watch: {
    price() {
      let num = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
      if (!num.test(this.price) && this.price) {
        this.price = ''
        this.$toast({
          message: '价格只能输入数字,可以保留两位小数',
          duration: 1500
        })
      }
    }
  },
  methods: {
    // 返回
    goBack(val) {
      if (val == 'back') {
        this.$router.go(-1)
      }
    },
    // 查看会员卡数量
    seeVipNum() {
      let params = {
        order_id: this.serialDetail.id
      }
      this.Http.seeVipNum(params).then(res => {
        if (res.total == 0) {
          res.max_serial = 0
          res.min_serial = 0
        }
        // console.log(res);
        this.vipNum = res
      })
    },
    // 队员选择数据请求
    teamSelection() {
      this.Http.getProxyList({
        proxy_id: this.proxy_id
      }).then(res => {
        // console.log(res)
        if (res.length) {
          this.person = res
        } else {
          this.person = [{ id: 0, name: '暂无队员' }]
        }
      })
    },
    // selectProxy
    selectProxy(res, c) {
    //   console.log(res[0].id)
      this.activeProxy = res
      //   console.log(this.activeProxy[0].id)
      c()
      // 学校
      this.schoolSelection()
    },
    // 学校选择数据请求
    schoolSelection() {
    //   console.log(this.activeProxy[0].id)
      this.Http.getProxySchoolList({
        id: this.activeProxy[0] ? this.activeProxy[0].id : ''
      })
        .then(res => {
          this.activeSchool = ''
        //   console.log(res)
          if (res.length) {
            this.school = res
          } else {
            this.school = [{ id: 0, name: '暂无学校' }]
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    selectSchool(res, c) {
    //   console.log(res)
      if (res[0].name !== '请先选择队员' && res[0].name !== '暂无学校') {
        this.activeSchool = res
      }

      // console.log(this.activeSchool[0].id);
      c()
    },
    // 提交请求
    subData() {
      let params = {
        order_id: this.serialDetail.id,
        name: this.pname,
        pack: this.serialDetail.pack,
        min_serial: this.vipNum.min_serial,
        max_serial: this.vipNum.max_serial,
        type: 1,
        present_price: this.price,
        proxy_id: this.activeProxy[0].id,
        school_id: this.activeSchool[0].id,
        remark: this.textArea
      }
      // console.log(params);
      let times
      clearTimeout(times)
      // console.log(params);
      this.Http.recoverySerial(params)
        .then(res => {
          // console.log(res);
          this.$toast({
            message: '分配成功',
            duration: 500
          })
          times = setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        })
        .catch(err => {
          if (err.msg == '缺少参数') {
            if (!this.activeProxy[0].id) {
              this.$toast({
                message: '需要选择队员',
                duration: 1500
              })
            } else if (!this.activeSchool[0].id) {
              this.$toast({
                message: '需要选择学校',
                duration: 1500
              })
            }
          }
        })
    },
    // 点击确定
    submission() {
      if (
        this.pname &&
        this.price &&
        this.activeProxy.length &&
        this.activeSchool.length
      ) {
        this.subData()
      } else {
        if (this.vipNum.min_serial == 0 || this.vipNum.max_serial == 0) {
          this.$toast({
            message: '序列号不能为0或空',
            duration: 1500
          })
        } else if (!this.pname) {
          this.$toast({
            message: '请输入新批次名称',
            duration: 1500
          })
        } else if (!this.price) {
          this.$toast({
            message: '请输入新批次价格',
            duration: 1500
          })
        } else if (!this.activeProxy.length) {
          this.$toast({
            message: '请选择队员',
            duration: 1500
          })
        } else if (!this.activeSchool.length) {
          this.$toast({
            message: '请选择学校',
            duration: 1500
          })
        } else {
          this.$toast({
            message: '请输入正确的序列号',
            duration: 1500
          })
        }
      }
    }
  },
  created() {
    // console.log(this.serialDetail.id);
    // 查看会员卡数量
    this.seeVipNum()
    // 队员选择数据
    this.teamSelection()
  }
}
</script>

<style scoped lang="less">
.serial-change {
  background-color: #fff;
}

.card {
  padding: 34px 36px;
  background: linear-gradient(-83deg, rgb(20, 200, 255), rgb(2, 151, 255));
  box-shadow: 0 7px 12px 0 rgba(79, 184, 254, 0.4);
  border-radius: 20px;
  color: #fff;
  font-size: 28px;
  .name-num {
    margin-bottom: 34px;
    font-size: 36px;
    font-weight: bold;
    .num {
      font-weight: 500;
    }
  }
}

.total {
  margin: 60px 0 30px;
  font-size: 36px;
  font-weight: bold;
  color: #222;
}

.text,
.select,
.input {
  padding: 30px 36px;
  background: #f0f2f5;
  border-radius: 20px;
  font-size: 32px;
  line-height: 1;
  &.text {
    height: 216px;
  }
}
.start {
  width: 299px;
  height: 90px;
  background: rgba(240, 242, 245, 1);
  border-radius: 20px;
  box-sizing: border-box;
  padding-left: 36px;
  font-size: 32px;
  color: #222;
}
.form {
  margin-bottom: 40px;
}

.item {
  align-items: center;

  &:not(:last-child) {
    margin-bottom: 34px;
    &.select {
      margin-bottom: 40px;
    }
  }
}

.number {
  font-size: 32px;
  color: #222;
  .span {
    width: 80px;
    font-size: 34px;
  }
}

.btn {
  background: linear-gradient(-90deg, rgb(20, 200, 255), rgb(2, 151, 255));
  border-radius: 45px;
  color: #fff;
  font-size: 34px;
  height: 90px;
  line-height: 90px;
}
.flexSelect {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.triangle {
  display: block;
  width: 0;
  height: 0;
  border-right: 18px solid transparent;
  border-left: 18px solid transparent;
  border-top: 20px solid rgba(149, 152, 153, 1);
  margin-top: 6px;
}
</style>
